<template>
  <div class="container">
    <!--头部-->
    <mxg-header/>

    <!--中间主体区域-->
    <div class="mxg-main">
      <nuxt/>
    </div>

    <!--底部-->
    <mxg-footer/>

    <!-- 回到顶部组件 bottom 是图标距离底部高度 -->
    <div id="id-back-up">
      <el-backtop :bottom="100">
        <div class="my-back-up">
          UP
        </div>
      </el-backtop>
    </div>
  </div>

</template>

<script>
import MxgHeader from '@/components/layout/Header'
import MxgFooter from '@/components/layout/Footer'

export default {
  components: {
    MxgHeader, // MxgHeader: MxgHeader
    MxgFooter
  }
}
</script>

<style>

.container {
  background-image: url("~@/assets/images/background.jpg");
  background-repeat: repeat-y;
  /*box-shadow: 0 0 20px rgba(0, 0, 0, 1);*/
  /*background-repeat: no-repeat;*/
  /*background-size: 100% 100%;*/
  /*filter: blur(15px);*/
}

.mxg-main {
  width: 95%;
  padding-top: 90px;
  margin: 0 auto;
}


/* 回到顶部 */
#id-back-up{
  z-index: 99999 !important;
}

.my-back-up {
  /*border: 2px solid blue;*/
  height: 100%;
  width: 100%;
  background-color: #f2f5f6;
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  text-align: center;
  font-weight: bold;
  line-height: 40px;
  color: #1989fa;

  /*z-index: 2000;*/
}

.my-back-up:hover {
  color: rgb(52, 93, 194);
  box-shadow: 0 0 40px rgba(93, 125, 206, 1);
}

</style>
